<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>购物车</title>

<!-- Bootstrap -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/metisMenu.min.css" rel="stylesheet">
<link href="/css/index.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div class="header">
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed"
						data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
						aria-expanded="false">
						<span class="sr-only">Toggle navigation</span> <span
							class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span>
					</button>
					#if(userinfo.getUsername()?? != null) <a class="navbar-brand"
						href="#">Hi，#(userinfo.username??)</a> <a class="logout"
						href="/login/logout">退出</a> #else <a class="navbar-brand"
						href="#">欢迎光临<span>简书</span>,请
					</a> <a class="logout" href="/login">登录</a> #end
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse"
					id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navbar-right">
						<li class="active"><a href="/userCenter">个人中心 <span
								class="sr-only">(current)</span></a></li>
						<li class="active"><a href="/shoppingCart">购物车 <span
								class="sr-only">(current)</span></a></li>
						<li class="active"><a href="/order">我的订单 <span
								class="sr-only">(current)</span></a></li>
						<li class="active"><a href="#">联系客服 <span class="sr-only">(current)</span></a></li>
					</ul>
				</div>
				<!-- /.navbar-collapse -->
			</div>
			<!-- /.container-fluid -->
		</nav>
	</div>
	<div class="search">
		<nav id="search" class="navbar">
			<div class="col-md-3">
				<a href="/"><img src="/picture/DDlogoNEW.gif"></img></a>
			</div>
			<form role="form" action="/search/search">
				<div class="col-md-6">
					<div class="input-group" style="margin-top: 20px">
						<input type="text" class="form-control" name="input"
							placeholder="Search for..."> <span
							class="input-group-btn">
							<button class="btn btn-default" type="submit">Go!</button>
						</span>
					</div>
					<nav>
						<strong>热搜:</strong>&nbsp;&nbsp; <a href="/search/search/javaweb">JavaWeb</a>
						&nbsp;&nbsp;&nbsp;&nbsp; <a href="/search/search/C++">C++</a>
						&nbsp;&nbsp;&nbsp;&nbsp; <a href="/search/search/择天记">择天记</a>
						&nbsp;&nbsp;&nbsp;&nbsp; <a href="/search/search/刘明">刘明</a>
					</nav>
				</div>
			</form>
			<div class="col-md-3">
				<div class="btn-group" role="group" aria-label="..."
					style="margin-top: 20px">
					<a href="/shoppingCart" class="btn btn-warning btn-md"
						role="button"><img src="/picture/shoppingCart.png"
						width="15px" height="15px" />&nbsp;&nbsp;购物车</a> <a href="/order"
						class="btn btn-danger btn-md" role="button"><img
						src="/picture/orders.png" width="15px" height="15px" />&nbsp;&nbsp;我的订单</a>
				</div>
			</div>
		</nav>
	</div>
	<div class="container">
		<div class="panel panel-primary col-md-offset-2 col-md-8">
			<div class="fn-shops">
				<div class="fn-shop">
					<div class="shopping_list">
						<table class="table">
							<thead>
								<tr>
									<th></th>
									<th class="col-md-3"></th>
									<th class="col-md-3">图书简介</th>
									<th class="col-md-1">价格</th>
									<th class="col-md-1">数量</th>
									<th class="col-md-1">总计</th>
									<th class="col-md-3">操作</th>
								</tr>
							</thead>
							<tbody>
								#for(x : cart)
								<tr>
									<td class="row1"></td>
									<td><a href="/bookinfo/#(x.bookID)"><img
											src="/picture/#(x.picture)" /></a></td>
									<td>#(x.book)</td>
									<td>#(x.price)</td>
									<td>#(x.number)</td>
									<td>#(x.price*x.number)</td>
									<td><a href="/shoppingCart/delete/#(x.id)">删除</a></td>
								</tr>
								#end
							</tbody>
						</table>

						<hr>
						#if(cartNumber == 0)
						<div style="height: 360px">
							<center>
								<h2>您的购物车里什么也没有</h2>
							</center>
							<img src="/picture/empty_cart.png" />
						</div>
						#else
						<button class="btn btn-danger btn-lg col-md-offset-10"
							data-toggle="modal" data-target="#myModal">结算</button>
						<!-- 模态框（Modal） -->
						<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
							aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal"
											aria-hidden="true">&times;</button>
										<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
									</div>
									<div class="modal-body">在这里添加一些文本</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default"
											data-dismiss="modal">关闭</button>
										<button type="button" class="btn btn-primary">提交更改</button>
									</div>
								</div>
								<!-- /.modal-content -->
							</div>
							<!-- /.modal -->
						</div>
						#end
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="footer"></div>
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="/js/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="/js/bootstrap.min.js"></script>
</body>
</html>